<template>
<div>
   <div class="form">
            <p v-for="(title,index) in titleList" v-bind:key="index"><span>{{title}} </span><input  type="text" v-model="allData[title]"></p>
  </div>
  <div class="button">
    <span v-on:click="confirm()">确定</span>
    <span v-on:click="cancel()">取消</span>
    </div>
</div>
</template>
<script>
export default {
  props: ["titleList"],
  data:function() {
    var obj = {};
    this.titleList.forEach(function(value){
      obj[value]="";
    })
  return  {allData:obj};
  
},
methods:{
    confirm:function(){
      this.$emit("confirm",this.allData);
      
    },
    cancel:function(){
      this.$emit("cancel");
      
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.form{
  p{
    span{
      display: inline-block;
      margin-right:20px;
      text-align: left;
    }
    input{
      width:100px;
      border:1px solid #000;
      
    }
  }
}

</style>